<template>
  <div class="index">
    <div class="index_header"></div>
    <div class="index_wrapper">
      <div class="index_wrapper__left">
        <div class="index_wrapper__title">智慧新民生</div>
        <div class="index_wrapper__body">
          <div class="index_wrapper__mod">
            <div class="mod_header">户政业务整体情况</div>
            <div class="mod_body">
              <xdh-echarts :options="hzOptions"></xdh-echarts>
            </div>
          </div>
          <div class="index_wrapper__mod">
            <div class="mod_header">
              居住证业务办理情况
              <span class="switch-nav">
                <i v-for="(item,index) in ['预约、办证量','签到量']" :class="jjzIndex === index ? 'selected' :''" @click="switchJZZ(index)">{{item}}</i>
              </span>
            </div>
            <div class="mod_body">
              <xdh-echarts :options="jjzOptions"></xdh-echarts>
            </div>
          </div>
          <div class="index_wrapper__mod">
            <div class="mod_header">
              出入境业务办理情况
              <span class="switch-nav">
                <i v-for="(item,index) in ['年累计','当月累计','本周预约']" :class="crjIndex === index ? 'selected' :''" @click="switchCRJ(index)">{{item}}</i>
              </span>
            </div>
            <div class="mod_body">
              <xdh-echarts :options="crjOptions"></xdh-echarts>
            </div>
          </div>
        </div>
      </div>
      <div class="index_wrapper__middle">
        <div class="index_wrapper__middle_1">
          <div class="index_wrapper__title">智慧新指挥</div>
          <div class="index_wrapper__body map">
            <div class="block" style="width:100%;height:100%;left:0;top:0;" v-show="mapSwitch.heatmap">
              <xdh-echarts :options="heatmapOptions" map="china" :geo="mapGeo"></xdh-echarts>
            </div>
            <div class="block" style="width:200px;height:100%;left:30%;top:0;" v-show="mapSwitch.police">
              <span v-for="(item,$index) in 5" :style="setIconStyle('police',$index)"><img src="../assets/images/index/icon_jl.png" alt=""></span>
            </div>
            <div class="block" style="width:200px;height:100%;left:30%;top:0;" v-show="mapSwitch.car">
              <span v-for="(item,$index) in 5" :style="setIconStyle('car',$index)"><img src="../assets/images/index/icon_jc.png" alt=""></span>
            </div>
            <div class="block" style="width:200px;height:100%;left:30%;top:0;" v-show="mapSwitch.alarm">
              <span v-for="(item,$index) in 5" :style="setIconStyle('alarm',$index)"><img src="../assets/images/index/icon_yj.png" alt=""></span>
            </div>
            <div class="block" style="right:30px;top:10px;">{{currentTime.time}} {{currentTime.date}} {{currentTime.day}}</div>
            <div class="block" style="right:40px;top:50px;">
              <ul class="list">
                <li v-for="item in mapData">
                  <div>{{item.name}}</div>
                  <span>{{item.number}}</span>
                </li>
              </ul>
            </div>
            <div class="block map_icon" style="right:60px;bottom:20px;">
              <span v-for="(item,index) in mapIcon" @click="handleSwitchType(index)">
                <img :src="require('../assets/images/index/'+item.icon)" alt="">
                {{item.name}}
              </span>
            </div>
          </div>
        </div>
        <div class="index_wrapper__middle_2">
          <div class="index_wrapper__title">智慧新侦查</div>
          <div class="zcList">
            <div class="list" v-for="item in zcList">
              <div class="left">
                <span style="display: inline-block;width:66px;height:70px;"><img :src="require('../assets/images/index/'+item.icon)" alt=""></span>
                <div>{{item.name}}</div>
              </div>
              <div class="info">
                <span v-for="name in item.list">{{name}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index_wrapper__right">
        <div class="index_wrapper__title">智慧新警队</div>
        <div class="index_wrapper__body">
          <div class="index_wrapper__mod" style="height:30%;">
            <div class="mod_header">值班备勤情况</div>
            <div class="mod_body">
              <div style="width:320px;float:left;color:#ffde36;line-height: 24px;">
                <div>值班领导：严芳</div>
                <div>110值班民警：刘华艳、黄文宁</div>
                <div>社区民警：罗绍强、李晓轩、李荣华、唐继明</div>
                <div>巡逻民警：陈华海、刘桂荣、郑焕伟、梁锦标</div>
              </div>
              <div class="zb_date">
                <p>{{currentTime.date}} {{currentTime.day}}</p>
                <span>{{currentDate.getDate()}}</span>
              </div>
            </div>
          </div>
          <div class="index_wrapper__mod" style="height:35%;">
            <div class="mod_header">考勤情况</div>
            <div class="mod_body">
              <xdh-echarts :options="kqOptions"></xdh-echarts>
            </div>
          </div>
          <div class="index_wrapper__mod" style="height:35%;">
            <div class="mod_header">学习培训情况</div>
            <div class="mod_body">
              <xdh-echarts :options="xxOptions"></xdh-echarts>
            </div>
          </div>
        </div>
      </div>
      <div class="index_wrapper__bottom">
        <div class="index_wrapper__title">智慧新防控</div>
        <div class="fk">
          <div class="fk-item">
            <div class="big">
              <span>
                <video class="video" autoplay loop>
                  <source src="/static/video/car.mp4" type="video/mp4"/>
                </video>
              </span>
            </div>
            <div class="index_wrapper__mod info">
              <div class="mod_header">微卡口</div>
              <div class="mod_body">
                <div class="item" v-for="item in wkkData">
                  <img :src="require('../assets/images/index/'+item.imgUrl)" width="96" height="110" alt="">
                  <span class="text1" v-html="item.name"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="fk-item">
            <div class="big">
              <span>
                <video class="video" autoplay loop>
                <source src="/static/video/people.mp4" type="video/mp4"/>
              </video>
              </span>
            </div>
            <div class="index_wrapper__mod info">
              <div class="mod_header">人脸识别</div>
              <div class="mod_body">
                <div class="item" v-for="item in rlData">
                  <img :src="require('../assets/images/index/'+item.imgUrl)" width="96" height="100" alt="">
                  <span class="text2" v-html="item.name"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="index_wrapper__mod gzts">
            <div class="mod_header">工作提示</div>
            <div class="mod_body">
              <p>1.碧涛社区昨日发生2起入室盗窃警情，请社区民警罗绍强加强社区走访提示；</p>
              <p>2.朝阳社区昨日发生3起拎包扒窃警情，请社区民警李晓轩加强社区走访提示；</p>
              <p>3.水拥社区昨晚发生2起打架斗殴事件，请社区民警李荣华开展宣传提示；</p>
              <p>4.社区民警开展社区走访提示，历史火灾警情高发巡逻民警开展现场疏导</p>
              <p>5.海霞社区热力图目前热力图显示出现超大人流，请巡逻民警陈华海、刘桂荣立即前往社区开展疏导；</p>
              <p>6.香凤社区去年同期火灾警情高发，请社区民警唐继明开展消防安全检查和宣传。</p>
            </div>
          </div>
          <div class="index_wrapper__mod jwt">
            <div class="mod_header">移动警务通当月应用情况</div>
            <div class="mod_body">
              <xdh-echarts :options="jwtOptions"></xdh-echarts>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" type="text/scss" scoped>
  * {
    box-sizing: border-box;
  }

  .index {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    padding: 20px 5px 0 10px;
    color: #fff;
    font-size: 12px;
    background: url("../assets/images/index_bg.jpg") top center no-repeat;

    &_header {
      width: 1920px;
      height: 52px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      background: url("../assets/images/index_title.png") top center no-repeat;
    }

    &_wrapper {
      position: relative;
      &__left, &__right {
        width: 481px;
        float: left;
        height: 675px;
        background: url("../assets/images/index_bg_left.png") top center no-repeat;
      }
      &__middle {
        width: 928px;
        height: 675px;
        float: left;
        margin: 0 6px 0 8px;
        padding-top: 48px;
        position: relative;
        &_1 {
          width: 928px;
          height: 471px;
          margin-top: 7px;
          background: url("../assets/images/index_bg_middle.png") top center no-repeat;
        }
        &_2 {
          width: 928px;
          height: 146px;
          position: relative;
          background: url("../assets/images/index_bg_middle_2.png") top center no-repeat;
        }
      }
      &__bottom {
        width: 1902px;
        height: 373px;
        float: left;
        position: relative;
        background: url("../assets/images/index_bg_bottom.png");
      }

      &__title {
        height: 32px;
        padding-left: 80px;
        font-size: 16px;
        color: #8bdeff;
        font-weight: bold;
        line-height: 32px;
        .index_wrapper__middle_2 & {
          line-height: 26px;
        }
      }

      &__body {
        height: calc(100% - 52px);
        padding: 10px 15px;
      }

      &__mod {
        .mod_header {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          padding-left: 7px;
          position: relative;
          &::before {
            content: '';
            display: block;
            width: 3px;
            height: 14px;
            position: absolute;
            left: 0;
            top: 3px;
            background: #0adbf9;
          }
          .switch-nav {
            display: inline-block;
            float: right;
            border: 1px solid #4e576f;
            i {
              display: inline-block;
              cursor: pointer;
              width: 78px;
              height: 18px;
              font-style: normal;
              font-size: 12px;
              line-height: 18px;
              text-align: center;
              float: left;
              border-right: 1px solid #4e576f;
              &:last-child {
                border-right: 0;
              }
              &.selected {
                background: #2a8ad7;
              }
            }
          }
        }
        .mod_body {
          height: calc(100% - 20px);
        }

        .index_wrapper__left & {
          height: 33.3333%;
        }
      }

      .zb_date {
        text-align: center;
        span {
          background: radial-gradient(rgba(38, 145, 193, 0), rgba(38, 145, 193, .4));
          width: 80px;
          height: 80px;
          border: 1px solid #2691c1;
          display: inline-block;
          margin: 0 auto;
          line-height: 80px;
          font-size: 60px;
          font-weight: bold;
          color: #0adbf9;
        }
      }

      .map {
        background: url("../assets/images/index_map_bg.jpg") top center no-repeat;
        position: relative;
        .block {
          position: absolute;
        }
        .list {
          list-style: none;
          color: #8bdeff;
          li {
            padding: 5px 0;
            border-bottom: 1px solid #90a8d4;
          }
          span {
            font-size: 14px;
            color: #eeca14;
            font-weight: bold;
          }
        }
        .map_icon {
          span {
            display: inline-block;
            margin-left: 15px;
            height: 18px;
            line-height: 18px;
            cursor: pointer;
            img {
              margin-right: 2px;
              vertical-align: top;
            }
          }
        }
      }

      .zcList {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 7px 15px;
        .list {
          width: 25%;
          padding-top: 30px;
          float: left;
          position: relative;
          &::after {
            content: '';
            display: block;
            width: 18px;
            height: 138px;
            position: absolute;
            right: 0;
            top: 0;
            background: url("../assets/images/index_line_1.png") no-repeat;
          }
          &:last-child::after {
            display: none;
          }
          .left {
            width: 120px;
            float: left;
            text-align: center;
          }
          .info {
            float: left;
            span {
              padding-left: 18px;
              line-height: 20px;
              display: block;
              position: relative;
              &::before {
                content: '';
                display: block;
                width: 8px;
                height: 8px;
                position: absolute;
                left: 0;
                top: 6px;
                border-radius: 50%;
                background: #0adbf9;
              }
            }
          }
        }
      }

      .fk {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 8px 15px;
        .fk-item {
          width: 580px;
          height: 100%;
          float: left;
          padding: 5px 0 0 2px;
          position: relative;
          .big {
            width: 336px;
            height: 329px;
            margin-right: 12px;
            padding-top: 25px;
            float: left;
            span {
              display: block;
              width: 100%;
              height: 100%;
              border: 1px solid #2793c6;
              position: relative;
              .video {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 1;
                object-fit: fill;
              }
            }
          }
          .info {
            width: calc(100% - 348px);
            float: left;
            .item {
              width: 100px;
              height: 147px;
              margin: 5px 10px 5px 0;
              float: left;
              border: 1px solid #2793c6;
              text-align: center;
              background: radial-gradient(rgba(38, 145, 193, 0), rgba(38, 145, 193, .3));
              span {
                display: block;
                &.text1 {
                  line-height: 34px;
                  font-size: 14px;
                }
                &.text2 {
                  padding-top: 5px;
                }
              }
            }
          }
        }
        .gzts {
          width: 270px;
          height: 100%;
          float: left;
          padding: 5px 20px 0 5px;
          position: relative;
          p {
            color: #ffde36;
            line-height: 18px;
          }
        }
        .fk-item::after, .gzts::after {
          content: '';
          display: block;
          width: 18px;
          height: 358px;
          position: absolute;
          right: 0;
          top: 0;
          background: url("../assets/images/index_line_2.png") no-repeat;
        }
        .jwt {
          width: calc(100% - 580px - 580px - 270px);
          height: 100%;
          padding: 5px 0 0 5px;
          float: left;
        }
      }
    }
  }
</style>

<script>
  import Echarts from 'echarts'
  import date from '../utils/date'
  import XdhEcharts from '../widgets/xdh-echarts'
  import china from '../widgets/xdh-echarts/map/china.json'

  // 户政业务整体情况
  const hzOptions = {
    color: ['#2a8ad7', '#83c92a', '#eeca14'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['年累计办证', '当月办证量', '本周预约量'],
      itemWidth: 10,
      itemHeight: 10,
      borderRadius: 0,
      icon: 'rect',
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      top: 32,
      bottom: 40,
      left: 30,
      right: 30
    },
    xAxis: [
      {
        type: 'category',
        data: ['自助办理身份证', '咨询户籍业务', '居住证签到'],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff'
        }

      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：条',
        nameTextStyle: {
          color: '#fff'
        },
        interval: 100,
        max: 500,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#a9afb7'
        },
        splitLine: {
          lineStyle: {
            color: '#4d5260'
          }
        }
      }
    ],
    series: [
      {
        name: '年累计办证',
        type: 'bar',
        barGap: 0.2,
        barWidth: 15,
        data: [420, 432, 401]
      },
      {
        name: '当月办证量',
        type: 'bar',
        barGap: 0.2,
        barWidth: 15,
        data: [220, 182, 191]
      },
      {
        name: '本周预约量',
        type: 'bar',
        barGap: 0.2,
        barWidth: 15,
        data: [150, 232, 201]
      }
    ]
  }
  // 考勤情况
  const kqOptions = {
    color: ['#0172be', '#0cdaf7', '#edc919', '#e60e89', '#d58ce5'],
    tooltip: {
      trigger: 'item',
      confine: true
    },
    series: [
      {
        type: 'pie',
        silent: true,
        radius: [15, 25],
        center: ['50%', '50%'],
        label: {
          show: false
        },
        itemStyle: {
          normal: {
            color: '#0a3765',
            borderWidth: 1,
            borderColor: '#1b63a5'
          }
        },
        data: [
          {value: 335, name: '直达'}
        ]
      },
      {
        type: 'pie',
        radius: [25, 90],
        center: ['50%', '50%'],
        clockwise: false,
        roseType: 'area',
        label: {
          color: '#fff',
          formatter: '{b} {d}%'
        },
        labelLine: {
          length: 10
        },
        data: [
          {value: 10, name: '备勤'},
          {value: 20, name: '倒休'},
          {value: 15, name: '请假'},
          {value: 25, name: '出差'},
          {value: 20, name: '出勤'}
        ]
      }
    ]
  }
  // 学习培训情况
  const xxOptions = {
    color: ['#e60e8d', '#eeca14'],
    tooltip: {
      trigger: 'axis',
      confine: true
    },
    grid: {
      top: 32,
      bottom: 40,
      left: 30,
      right: 30
    },
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      borderRadius: 0,
      icon: 'rect',
      textStyle: {
        color: '#fff'
      },
      data: ['公安业务知识培训', '公安实战操作培训']
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      boundaryGap: false,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '单位：次',
      nameTextStyle: {
        color: '#fff'
      },
      interval: 20,
      max: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#a9afb7'
      },
      splitLine: {
        lineStyle: {
          color: '#4d5260'
        }
      }
    },
    series: [
      {
        name: '公安业务知识培训',
        type: 'line',
        data: ['10', '20', '30', '40', '60', '70', '80', '70', '60', '10', '12', '14']
      },
      {
        name: '公安实战操作培训',
        type: 'line',
        data: ['50', '30', '80', '90', '10', '80', '80', '20', '60', '40', '12', '14']
      }
    ]
  }

  // 智慧新指挥
  const mapData = [
    {
      name: '今日投入警力',
      number: '30人'
    },
    {
      name: '今日投入警车',
      number: '6辆'
    },
    {
      name: '今日发生警情',
      number: '15起'
    },
    {
      name: '今日处置预警',
      number: '8件'
    }
  ]
  const mapIcon = [
    {
      name: '警情',
      icon: 'icon_jq.png'
    },
    {
      name: '警力',
      icon: 'icon_jl.png'
    },
    {
      name: '警车',
      icon: 'icon_jc.png'
    },
    {
      name: '预警',
      icon: 'icon_yj.png'
    },
    {
      name: '人口移动态势',
      icon: 'icon_jq.png'
    }
  ]

  // 智慧新侦查
  const zcList = [
    {
      name: '合成作战平台',
      icon: 'icon_hczz.png',
      list: ['资源共享', '手段合成', '综合研判', '集中服务']
    },
    {
      name: '云脑战警',
      icon: 'icon_ynzj.png',
      list: ['共享侦查', '战警联盟', '云脑风暴', '战警日志']
    },
    {
      name: '执法办案智能管家',
      icon: 'icon_zngj.png',
      list: ['电子建档', '流程管理', '智能办案', '安全监控']
    },
    {
      name: '智能报警',
      icon: 'icon_znbj.png',
      list: ['自助报警', '制作笔录', '进度查询', '法律智库']
    }
  ]

  // 微卡口
  const wkkData = [
    {
      name: '粤C MQ426',
      imgUrl: 'car-1.jpg'
    },
    {
      name: '粤C T1356',
      imgUrl: 'car-2.jpg'
    },
    {
      name: '粤C BF831',
      imgUrl: 'car-3.jpg'
    },
    {
      name: '粤C IL535',
      imgUrl: 'car-4.jpg'
    }
  ]
  // 人脸识别
  const rlData = [
    {
      name: '于波<br/>女 54岁',
      imgUrl: 'people-1.jpg'
    },
    {
      name: '肖土友<br/>男 41岁',
      imgUrl: 'people-2.jpg'
    },
    {
      name: '张峥<br/>男 27岁',
      imgUrl: 'people-3.jpg'
    },
    {
      name: '贾婷婷<br/>女 28岁',
      imgUrl: 'people-4.jpg'
    }
  ]
  // 移动警务通当月应用情况
  const jwtData = [
    {
      name: 'OA应用',
      value: 122,
      last: 50,
      radius: [125, 130]
    },
    {
      name: '信息采集量',
      value: 101,
      last: 50,
      radius: [117, 122]
    },
    {
      name: '巡逻盘查量',
      value: 95,
      last: 50,
      radius: [110, 115]
    },
    {
      name: '交管处理',
      value: 87,
      last: 60,
      radius: [102, 107]
    },
    {
      name: '人像识别',
      value: 74,
      last: 70,
      radius: [94, 99]
    },
    {
      name: '人员检查',
      value: 52,
      last: 80,
      radius: [86, 91]
    },
    {
      name: '车辆检查',
      value: 45,
      last: 90,
      radius: [78, 83]
    }
  ]
  const setJWTOptions = function () {
    let series = []
    let legend = []

    const setSeries = function () {
      jwtData.forEach(item => {
        legend.push(item.name)
        series.push({
          name: item.name,
          type: 'pie',
          clockWise: false,
          radius: item.radius,
          center: ['30%', '50%'],
          itemStyle: {
            normal: {
              label: {show: false},
              labelLine: {show: false},
              shadowBlur: 40,
              shadowColor: 'rgba(40, 40, 40, 0.5)'
            }
          },
          hoverAnimation: false,
          data: [
            {
              value: item.value,
              name: item.name
            },
            {
              value: item.last,
              name: 'invisible',
              silent: true,
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)',
                  label: {show: false},
                  labelLine: {show: false}
                },
                emphasis: {
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
          ]
        })
      })
      return series
    }

    return {
      title: {
        text: '单位：次',
        top: 30,
        right: 80,
        textStyle: {
          fontSize: '12',
          fontWeight: 'normal',
          color: '#fff'
        }
      },
      color: ['#3282d7', '#ff7d51', '#9c6be8', '#87cc23', '#05dff8', '#efc813', '#ec0b8d'],
      tooltip: {
        show: true,
        formatter: '{b} : {c}'
      },
      legend: {
        orient: 'vertical',
        itemWidth: 15,
        itemHeight: 10,
        top: 50,
        right: 20,
        textStyle: {
          color: '#fff'
        },
        formatter: function (name) {
          let value = null;
          jwtData.forEach(n => {
            if (n.name === name) {
              value = n.value
              return false;
            }
          })
          return name + '  ' + value
        },
        data: legend
      },
      series: setSeries()
    }
  }

  // heatmap
  var geoCoordMap = {
    '齐齐哈尔': [123.97, 47.33],
    '盐城': [120.13, 33.38],
    '赤峰': [118.87, 42.28],
    '青岛': [120.33, 36.07],
    '乳山': [121.52, 36.89],
    '金昌': [102.188043, 38.520089],
    '泉州': [118.58, 24.93],
    '莱西': [120.53, 36.86],
    '日照': [119.46, 35.42],
    '胶南': [119.97, 35.88],
    '南通': [121.05, 32.08],
    '拉萨': [91.11, 29.97],
    '云浮': [112.02, 22.93],
    '梅州': [116.1, 24.55],
    '文登': [122.05, 37.2],
    '上海': [121.48, 31.22],
    '攀枝花': [101.718637, 26.582347],
    '威海': [122.1, 37.5],
    '承德': [117.93, 40.97],
    '厦门': [118.1, 24.46],
    '汕尾': [115.375279, 22.786211],
    '潮州': [116.63, 23.68],
    '丹东': [124.37, 40.13]
  };
  const convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push(geoCoord.concat(data[i].value));
      }
    }
    return res;
  };
  const heatmapOptions = {
    geo: {
      map: 'china',
      show: false,
      center: [130, 30.33]
    },
    visualMap: {
      type: 'continuous',
      calculable: true,
      itemHeight: 80,
      left: 30,
      bottom: 30,
      min: 0,
      max: 70,
      splitNumber: 5,
      inRange: {
        color: ['#c05a12', '#eeef25', '#92f832', '#8ad7f1'].reverse()
      },
      textStyle: {
        color: '#fff'
      }
    },
    series: [{
      name: 'AQI',
      type: 'heatmap',
      coordinateSystem: 'geo',
      data: convertData([
        {name: '齐齐哈尔', value: 62},
        {name: '盐城', value: 50},
        {name: '赤峰', value: 40},
        {name: '青岛', value: 60},
        {name: '乳山', value: 16},
        {name: '泉州', value: 60},
        {name: '莱西', value: 30},
        {name: '日照', value: 34},
        {name: '胶南', value: 60},
        {name: '南通', value: 33},
        {name: '拉萨', value: 22},
        {name: '云浮', value: 27},
        {name: '梅州', value: 44},
        {name: '文登', value: 53},
        {name: '上海', value: 53},
        {name: '攀枝花', value: 53},
        {name: '威海', value: 53},
        {name: '承德', value: 53},
        {name: '上海', value: 53},
        {name: '厦门', value: 53},
        {name: '汕尾', value: 53},
        {name: '潮州', value: 53},
        {name: '丹东', value: 53}
      ])
    }]
  }

  export default {
    components: {
      XdhEcharts
    },
    data() {
      return {
        currentDate: new Date(),
        currentTime: {
          day: null,
          date: null,
          time: null
        },
        jjzIndex: 0,
        crjIndex: 0,
        hzOptions: hzOptions,
        mapData: mapData,
        mapIcon: mapIcon,
        zcList: zcList,
        kqOptions: kqOptions,
        xxOptions: xxOptions,
        wkkData: wkkData,
        rlData: rlData,
        jwtOptions: setJWTOptions(),
        mapGeo: china,
        heatmapOptions: heatmapOptions,
        mapSwitch: {
          heatmap: true,
          police: true,
          car: true,
          alarm: true
        }
      }
    },
    computed: {
      // 居住证业务办理情况
      jjzData() {
        let data = []
        const baseData = [
          {
            name: '年累计办证量',
            color: '#258cce',
            center: ['17%', '50%']
          },
          {
            name: '当月办证量',
            color: '#83c92b',
            center: ['50%', '50%']
          },
          {
            name: '本周预约量',
            color: '#eb088d',
            center: ['83%', '50%']
          }
        ]
        const setData = function (data) {
          const arr = baseData.map((item, index) => {
            item.value = data[index]
            return item
          })
          return arr
        }
        switch (this.jjzIndex) {
          case 0:
            data = setData([1568, 568, 56])
            break;
          case 1:
            data = setData([125, 50, 500])
            break;
        }
        return data
      },
      jjzOptions() {
        let series = []
        let random = null, total = null

        this.jjzData.forEach(item => {
          random = Math.random()
          total = item.value / random / 0.8
          series.push(
            // 底层
            {
              type: 'pie',
              hoverAnimation: false,
              radius: ['60%', '70%'],
              center: item.center,
              startAngle: 233,
              labelLine: {
                show: false
              },
              label: {
                show: false
              },
              data: [
                {
                  value: total * 0.8,
                  itemStyle: {
                    normal: {
                      color: 'rgba(255,255,255,.2)'
                    }
                  }
                },
                {
                  value: total * 0.2,
                  itemStyle: {opacity: 0}
                }
              ]
            },
            // 数据层
            {
              type: 'pie',
              hoverAnimation: false,
              radius: ['60%', '70%'],
              center: item.center,
              startAngle: 233,
              labelLine: {
                normal: {
                  show: false
                }
              },
//              label: {
//                normal: {
//                  position: 'center'
//                }
//              },
              data: [
                {
                  name: item.name,
                  value: item.value,
                  itemStyle: {
                    normal: {
                      color: item.color
                    }
                  },
                  label: {
                    formatter: function (params) {
                      const value = params.value.toLocaleString()
                      return '{top|' + value + '}\n' + params.name
                    },
                    rich: {
                      top: {
                        padding: [5, 0],
                        color: '#fff',
                        fontWeight: 'bold',
                        fontSize: 26
                      }
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                      fontSize: ' 14',
                      fontWeight: 'normal',
                      color: '#fff'
                    }
                  }
                },
                {
                  value: total - item.value,
                  itemStyle: {opacity: 0}
                }
              ]
            }
          )
        })

        return {
          title: {
            left: 0,
            top: 0,
            text: '单位：条',
            textStyle: {
              fontSize: 12,
              fontWeight: 'normal',
              color: '#fff'
            }
          },
          series: series
        }
      },
      // 出入境业务办理情况
      crjData() {
        let data = []
        switch (this.crjIndex) {
          case 0:
            data = ['150', '10', '150', '90', '10', '140', '120', '130', '60', '130', '12', '14']
            break;
          case 1:
            data = ['10', '50', '20', '50', '80', '60', '55', '43', '27', '10', '44', '14']
            break;
          case 2:
            data = ['10', '33', '34', '10', '10', '34', '10']
            break;
        }
        return data
      },
      crjDate() {
        let date = []
        switch (this.crjIndex) {
          case 0:
            date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            break;
          case 1:
            date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            break;
          case 2:
            date = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            break;
        }
        return date
      },
      crjOptions() {
        return {
          tooltip: {
            trigger: 'axis',
            confine: true
          },
          grid: {
            top: 32,
            bottom: 40,
            left: 30,
            right: 30
          },
          xAxis: {
            type: 'category',
            data: this.crjDate,
            boundaryGap: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            name: '单位：条',
            nameTextStyle: {
              color: '#fff'
            },
            interval: 50,
            max: 200,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#a9afb7'
            },
            splitLine: {
              lineStyle: {
                color: '#4d5260'
              }
            }
          },
          series: [
            {
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  color: '#e4c216'
                }
              },
              areaStyle: {
                normal: {
                  color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(228, 194, 22)'
                  }, {
                    offset: 1,
                    color: 'rgba(228, 194, 22,0)'
                  }])
                }
              },
              data: this.crjData
            }
          ]
        }
      }
    },
    created() {
      this.getCurrentDay()
    },
    methods: {
      setIconStyle(type, index) {
        const pos = {
          police: [[60, 100], [100, 100], [15, 200], [10, 300], [150, 350]],
          car: [[65, 150], [125, 100], [135, 200], [130, 310], [100, 330]],
          alarm: [[55, 130], [139, 106], [150, 200], [160, 250], [133, 300]]
        }
        return {
          position: 'absolute',
          left: pos[type][index][0] + 'px',
          top: pos[type][index][1] + 'px'
        }
      },
      handleSwitchType(index) {
        switch (index) {
          case 0:
            this.mapSwitch.heatmap = !this.mapSwitch.heatmap
            break;
          case 1:
            this.mapSwitch.police = !this.mapSwitch.police
            break;
          case 2:
            this.mapSwitch.car = !this.mapSwitch.car
            break;
          case 3:
            this.mapSwitch.alarm = !this.mapSwitch.alarm
            break;
          case 4:
            this.mapSwitch.heatmap = !this.mapSwitch.heatmap
            break;
        }
      },
      getCurrentDay() {
        const day = ['日', '一', '二', '三', '四', '五', '六']
        this.currentTime.day = '星期' + day[this.currentDate.getDay()]
        this.currentTime.date = date(this.currentDate, 'yyyy-MM-dd')
        this.currentTime.time = date(this.currentDate, 'hh:mm:ss')
      },
      switchJZZ(index) {
        this.jjzIndex = index
      },
      switchCRJ(index) {
        this.crjIndex = index
      }
    }
  }
</script>
